<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="查询/预定车位" name="first">
         <el-card class="box-card">

            <el-table :data="carInfors" border >
              <el-table-column type="index" label="序号" ></el-table-column>
               <el-table-column prop="carNumber" label="车位位置" ></el-table-column>
               <el-table-column prop="status" label="预定车位" >

                <template slot-scope="scope">
                   <el-switch  v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus(scope.row)">
                   </el-switch>
                    </template>
               </el-table-column>
             </el-table>
         </el-card>
          <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="queryInfo.pageNum"
               :page-sizes="[20, 50, 100]"
               :page-size="queryInfo.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
             </el-pagination>

        </el-tab-pane>
        <el-tab-pane label="我的车位信息" name="second" >

          <el-table :data="mycarInfors" border >
            <el-table-column prop="carId" label="车牌号" ></el-table-column>
             <el-table-column prop="carNumber" label="车位位置" ></el-table-column>
              <el-table-column prop="status" label="车位状态" >
                <template slot-scope="scope">
                   <el-tag effect="dark" v-if="status==0">空闲</el-tag>
                   <el-tag effect="dark" v-if="status==2">已入库</el-tag>
                   <el-tag effect="dark" v-if="status==1">已预定</el-tag>
                    </template>

              </el-table-column>
              <el-table-column prop="price" label="停车费用" >
               <template slot-scope="scope">
                 {{scope.row.price | priceFormat}}
               </template>
              </el-table-column>
               <el-table-column prop="inTimes" label="入库时间" :formatter="formatDate"></el-table-column>

            </el-table>


          </el-tab-pane>
      </el-tabs>

  </div>
</template>

<script>

 export default {
     data() {
       return {
         activeName: 'second',
         carId:'',
         price:'',

         carInfors:[],
         mycarInfors:[],
         queryInfo:{
          query:'', //用户查询数据
          pageNum: 1,//默认第一页
          pageSize:20  //每页五条数据
         },
          total:0,
          status:''


       };
     },
     methods: {
      async handleClick() {
         let vipToken= window.sessionStorage.getItem("token")
          const {data:res} =await this.$http.get('/vipinformation/'+vipToken)

          if(res.data!==null){
            console.log(res.data)
            this.mycarInfors=res.data

           if(res.data[0].inTimes==null){
             this.mychangeStatus(res.data[0].carId)
             this.status=res.data[0].status
             }
             else{
               this.status=2
             }
          }else{
            this.allinfo();
            this.mychangeStatus(res.data[0].carId)
          }
       },
      formatDate(row, column, cellValue, index) {
        if(cellValue==null){ return ''}
        let date = new Date(cellValue)
        let year = date.getFullYear()
        let month = (date.getMonth() + 1 + '').padStart(2, '0')
        let day = (date.getDate() + '').padStart(2, '0')
        let HH = (date.getHours() + '').padStart(2, '0')
        let MM = (date.getMinutes() + '').padStart(2, '0')
        let SS = (date.getSeconds() + '').padStart(2, '0')
        return year + '-' + month + '-' + day + ' ' + HH + ":" + MM + ":" + SS
      },




       handleSizeChange(pageSize){
         //查询的条件变化
         this.queryInfo.pageSize=pageSize
         //重写查询数据
         this.handleClick();
       },
       handleCurrentChange(pageNum){
         this.queryInfo.pageNum=pageNum
        this.handleClick();
       },
       async allinfo(){
         const{data:result}=await this.$http.get('/vipinformation/findallcar',{
          params: this.queryInfo})
         if(result.status !==200) return this.$message.error("数据拉取失败")
         this.carInfors=result.data.rows
         this.total=result.data.total

       },
       async changeStatus(carInfor){
          const{data:result} =await this.$http.put('/vipinformation/updateStatus',carInfor)
          if(result.status!==200) return this.$message.error('预定车位失败')
          this.$message.success("修改成功")

             this.handleClick();





       },
       async mychangeStatus(carId){
          const{data:result}=await this.$http.get('/vipinformation/mystatus/'+carId)
          this.total=1
          this.queryInfo.pageNum=1
          this.mycarInfors=result.data
          this.carInfors=result.data
          this.handleClick()
       }



     },
    mounted() {
  this.handleClick()
    }
   };
</script>

<style>
</style>
